<script setup lang="ts">
import { RouterLink, RouterView, useRoute } from 'vue-router'
import { routersList } from '@/router/index'
import { computed } from 'vue';

const route = useRoute()
const UIAdminMenu = ['demoUI1','userManage','roleManage']
const isRouteUI = computed(()=>{
  return UIAdminMenu.includes(route.name as string)
})
</script>

<template>
  <header v-if="!isRouteUI">
    <div class="wrapper">
      <nav>
        <!-- 1. 路由管理用hash, 代码简洁，循环即可，且后期会自动更新页面 -->
        <RouterLink v-for="item in routersList" :key="item.name" :to="{ path: item.path }">{{
          item.title
        }}</RouterLink>

        <!-- 2. 当路径过长时，可直接通过名字跳转页面 -->
        <RouterLink :to="{ name: 'example1' }">跳转：example1 专题</RouterLink>

        <!-- 3. 路由嵌套 -->
        <router-link to="/studyRouterDemo1/sonDemo1">子组件中的路由嵌套sonDemo1</router-link>

        <!-- 4. 路由传参 -->
        <router-link
          :to="{
            // name: 'sonDemo1',  // 也可以用name跳转
            path: '/studyRouterDemo1/sonDemo1',
            query: {
              id: 1,
              title: '新闻标题',
              content: '内容'
            }
          }"
          >query 传参</router-link
        >

        <!-- 5. router-link 的 params 传参 -->
        <router-link
          replace 
          :to="{
            // path: '/studyRouterDemo1/sonDemo1',  使用路径会报错
            name: 'sonDemo2',
            // 传递params时，需要提前在path路径中占位
            params: {
              id: 2,
              title: '新闻标题2',
              content: '内容2'
            }
          }"
          >params 传参：replace</router-link
        >

        <!-- 6. 命名视图 -->
        <router-link
        :to="{
          name: 'defaultp',
          params: {
            id: '10000'
          }
        }"
      >
        default: params 传参
      </router-link>
      </nav>
    </div>
    <!-- <div class="wrapper">
      <nav>
        <RouterLink to="/">首页</RouterLink>
        <RouterLink to="/studemo1">选项式API</RouterLink>
        <RouterLink to="/studemo2">组合式API</RouterLink>
        <RouterLink to="/studemo3">组合式API-自定义渲染-返回函数(h)</RouterLink>
        <RouterLink to="/studemo4">组合式API-自定义渲染-JSX（推荐）</RouterLink>
        <RouterLink to="/studemo5">组合式API-setup语法糖</RouterLink>
        <RouterLink to="/studemo6">组合式API-setup语法糖(ts)</RouterLink>

        <hr />
        <RouterLink to="/studemo21">模板语法一</RouterLink>
        <RouterLink to="/studemo22">模板语法二</RouterLink>
        <RouterLink to="/studemo23">模板语法三</RouterLink>
        <RouterLink to="/studemo24">模板语法总结</RouterLink>

        <hr />
        <RouterLink to="/studemo31">类与样式绑定</RouterLink>
        <RouterLink to="/studemo32">响应式基础</RouterLink>
        <RouterLink to="/studemo33">计算属性</RouterLink>
        <RouterLink to="/studemo34">条件渲染</RouterLink>
        <RouterLink to="/studemo35">列表渲染</RouterLink>
        <RouterLink to="/studemo36">事件处理</RouterLink>

        <hr />
        <RouterLink to="/studemo41">响应式工具</RouterLink>
        <RouterLink to="/studemo42">Reactive Proxy vs. Original</RouterLink>
        <RouterLink to="/studemo43">reactive() 的局限性</RouterLink>
        <RouterLink to="/studemo44">额外的 ref 解包细节</RouterLink>
        <RouterLink to="/studemo45">响应式 API:工具函数</RouterLink>
        <RouterLink to="/studemo46">Multiple Timers1</RouterLink>
        <RouterLink to="/studemo47">Multiple Timers2</RouterLink>
        <RouterLink to="/studemo48">Multiple Timers3</RouterLink>

        <hr />
        <RouterLink to="/studemo51">计算属性</RouterLink>
        <RouterLink to="/studemo52">侦听数据源类型</RouterLink>
        <RouterLink to="/studemo53">侦听器</RouterLink>
        <RouterLink to="/studemo54">watchEffect</RouterLink>
        <RouterLink to="/studemo55">侦听器-副作用清理</RouterLink>

        <hr />
        <RouterLink to="/studemo61">组件注册</RouterLink>
        <RouterLink to="/studemo62">组件传值:props</RouterLink>
        <RouterLink to="/studemo63">组件事件:emit</RouterLink>
        <RouterLink to="/studemo64">插槽 Slots</RouterLink>

        <hr />
        <RouterLink to="/studemo71">生命周期函数-onMounted</RouterLink>
        <RouterLink to="/studemo72">生命周期函数-onUnmounted</RouterLink>
        <RouterLink to="/studemo73">生命周期函数-onUpdated</RouterLink>

        <hr />
        <RouterLink to="/studemo81">组件v-model</RouterLink>

        <hr />
        <RouterLink to="/studemo91">HTTP-API请求</RouterLink>
        <RouterLink to="/studemo92">HTTP-axios请求</RouterLink>
        <RouterLink to="/studemo93">HTTP-axios请求示例</RouterLink>

        <hr />
        <RouterLink to="/testOne">testOne</RouterLink>
        <RouterLink to="/testTwo">testTwo</RouterLink>


        <hr />
        <RouterLink to="/example1">example1</RouterLink>

        <hr />
        <RouterLink to="/studdemo1">学生管理系统</RouterLink>
        <RouterLink to="/studdemo2">学生管理系统2</RouterLink>
        <RouterLink to="/studdemo3"
          >学生管理系统3(访问模板引用ref&组件暴漏defineExpose())</RouterLink
        >
        <RouterLink to="/studdemo4">学生管理系统4（组件+插槽）</RouterLink>

        <hr />
        <RouterLink to="/test">test - 购物车测试版</RouterLink>
        <RouterLink to="/test1">test1 - 购物车（组件）</RouterLink>
        <RouterLink to="/test2">test2 - 购物车（组件+插槽）</RouterLink>
      </nav>
    </div> -->
  </header>

  <RouterView />
</template>

<style scoped lang="scss">
.style {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
  color: blue;
}
header {
  border-bottom: 1px solid var(--color-border2);
  padding: 10px 0;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;

  a {
    display: inline-block;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
    color: blue;
  }
}
</style>
